<template>
	<div class="table-box">
		<ProTable
			ref="proTable"
			:pagination="false"
			title="菜单管理"
			:columns="columns"
			:requestApi="getMenuList"
			:dataCallback="dataCallBack"
			selectId="menuId"
			:tree-props="{ children: 'children', hasChildren: 'sysId' }"
		>
			<!-- 表格 header 按钮 -->
			<template #tableHeader>
				<el-button type="primary" :icon="CirclePlus" @click="openDrawer(1)">新增</el-button>
			</template>

			<!-- icon -->
			<template #icon="scope">
				<el-icon>
					<component :is="scope.row?.icon" v-if="scope.row?.icon"></component>
				</el-icon>
			</template>
			<!-- type -->
			<template #type="scope">
				<el-button :type="scope.row.type === 0 ? 'primary' : scope.row.type === 1 ? 'success' : ''" plain size="small">
					{{ scope.row.type === 0 ? '目录' : scope.row.type === 1 ? '菜单' : '按钮' }}
				</el-button>
			</template>

			<!-- 表格操作 -->
			<template #operation="scope">
				<el-button type="primary" link :icon="EditPen" @click="openDrawer(2, scope.row)">编辑</el-button>
				<el-button type="danger" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
			</template>
		</ProTable>
		<!-- 新增和编辑 -->
		<zhy-pop-form :drawerTitle="drawerTitle" ref="popRef">
			<template #formbox>
				<form-box :itemForm="itemForm" :submitting="submitting" :closeForm="cancelForm" :submit-form="submitForm" ref="formbox">
				</form-box> </template
		></zhy-pop-form>
	</div>
</template>

<script setup lang="tsx" name="menu">
import { ref, computed, nextTick, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { ZhyPopForm, ProTable, FormBox } from '@/components';
import { FromBoxProps } from '@/components/FormBox/interface';
import { ColumnProps } from '@/components/ProTable/interface';
import { useHandleData, useFilterHandle } from '@/hooks';

import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue';
import { getMenuList, addMenu, deleteMenu, editMenu } from '@/api/modules/sys';

import { buildMenuTreeRecursive } from '@/utils/util';
// const router = useRouter();
const { getSelectMenuList } = useFilterHandle();

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();

const dataCallBack = (data: any) => {
	return {
		list: buildMenuTreeRecursive(data?.menuList)
	};
};

// 表格配置项
const columns: ColumnProps[] = [
	{ prop: 'name', label: '菜单名称', width: 200, align: 'left' },
	{ prop: 'menuId', label: 'ID', width: 150 },
	{ prop: 'parentName', label: '上级菜单' },
	{ prop: 'url', label: '菜单URL', width: 300 },
	{ prop: 'icon', label: '图标' },
	{ prop: 'type', label: '类型' },
	{ prop: 'orderNum', label: '序号' },
	{ prop: 'perms', label: '授权标识' },
	{ prop: 'operation', label: '操作', fixed: 'right', width: 150 }
];

// 删除用户信息
const deleteAccount = async (params: any, index?: any) => {
	await useHandleData(deleteMenu, params.menuId, `删除【${params.name}】`);
	proTable.value.tableData = proTable.value.tableData.splice(index, 1);
	proTable.value.getTableList();
};

// 打开 drawer(新增、查看、编辑)
const popRef = ref<InstanceType<typeof ZhyPopForm>>();
const formbox = ref<InstanceType<typeof FormBox>>();
const handleType = ref(1);
const drawerTitle = ref<string>('新增');
const openDrawer = async (type: number, row?: any) => {
	popRef.value!.visible = true;
	handleType.value = type;
	drawerTitle.value = type === 1 ? '新增' : '编辑';
	// 编辑
	if (type === 2) {
		menuType.value = row?.type;
		nextTick(() => {
			formbox.value!.formParam = Object.assign(formbox.value!.formParam, {
				...row,
				parentName: row?.parentName ?? '一级菜单',
				parentId: row?.parentId ?? 0,
				types: row?.type
			});
		});
	}
};

// 初始化菜单类型数据
const options = [
	{
		label: '目录',
		value: 0
	},
	{
		label: '菜单',
		value: 1
	},
	{
		label: '按钮',
		value: 2
	}
];

// 提交表单
const submitting = ref(false);
const submitForm = (): void => {
	const params: any = formbox.value!.formParam;
	submitting.value = true;
	// 新增
	if (handleType.value === 1) {
		saveM(params);
	} else {
		// 编辑
		updateM(params);
	}
};

// 取消
const cancelForm = () => {
	popRef.value!.visible = false;
};

const updateM = (params: any): void => {
	editMenu({
		...params,
		type: params?.types
	})
		.then(() => {
			ElMessage.success('修改成功');
			submitting.value = false;
			popRef.value!.visible = false;
			proTable.value.getTableList();
		})
		.catch(() => {
			submitting.value = false;
		});
};
const saveM = (params: any): void => {
	addMenu({
		...params,
		type: params?.types
	})
		.then(() => {
			ElMessage.success('新增成功');
			submitting.value = false;
			popRef.value!.visible = false;
			proTable.value.getTableList();
		})
		.catch(() => {
			submitting.value = false;
		});
};

const menuType = ref(1);

// 初始化表单数据
const itemForm = computed(() => {
	const itemForm: FromBoxProps[] = [
		// prop 目前不用type字段，会有冲突
		{
			prop: 'types',
			label: '类型',
			enum: options,
			form: {
				el: 'radio-group',
				defaultValue: menuType.value
			},
			changeForm: (val: any) => {
				menuType.value = val;
			},
			rules: { required: true, message: '请选择新增类型', trigger: 'blur' }
		},
		{
			prop: 'name',
			label: menuType.value === 0 ? '目录名称' : menuType.value === 1 ? '菜单名称' : '按钮名称',
			form: { el: 'input', props: {}, defaultValue: '' },
			rules: { required: true, message: '请输入菜单名称', trigger: 'blur' }
		},
		{
			prop: 'parentId',
			label: '上级菜单',
			rules: { required: true, message: '请点击选择上级菜单' },
			enum: getSelectMenuList,
			form: {
				el: 'tree-select',
				defaultValue: 0,
				props: { suffixIcon: 'ArrowDown', readonly: true, placeholder: '请选择上级菜单', 'check-strictly': true }
			}
		},

		{
			prop: 'url',
			label: '前端Url',
			rules: { required: true, message: '请输入', trigger: 'blur' },
			form: { el: 'input', props: {}, defaultValue: '' },
			hidden: menuType.value !== 1
		},
		{
			prop: 'perms',
			label: '授权标识',
			form: { el: 'input', props: {}, defaultValue: '' },
			hidden: menuType.value === 0
		},
		{
			prop: 'orderNum',
			label: '排序号',
			form: { el: 'input', props: { type: 'number' }, defaultValue: 1 },
			hidden: menuType.value === 2
		},
		{
			prop: 'icon',
			label: '图标',
			form: { el: 'input', props: {}, defaultValue: '' },
			hidden: menuType.value === 2
		}
	];
	return itemForm;
});
onMounted(() => {
	console.log(111);
	// getMenuList().then((res: any) => {
	// 	dataProps.data = buildMenuTreeRecursive(res?.menuList);
	// });
});
</script>
